<template>
  <div class="hello">
    <br>
    <h1>{{ msg }}</h1>
    <div class="box">
      <div class="chl_box">
        <br>
        <br>
        <el-button type="primary" @click="downloadTemplate"><i class="el-icon-download"></i>下载导入模板</el-button>
        <!-- 下载模板a标签 -->
        <a ref="downloadTemplate" style="display: none" href="村级债权核对函导入模板.xlsx"></a>
        <br>
        <br>
        <br>
        <el-upload
            class="upload-demo"
            drag
            action="#"
            :limit=1
            :auto-upload="false"
            :on-change="handleFileUpload"
            multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        <br>
        <br>
        <el-button style="margin-left: 10px;height: 60px;width: 200px" size="medium" type="success" :disabled="disabled"
                   @click="handleExport">
          <i class="el-icon-upload el-icon--right">
          </i>导出word文件
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>

import * as xlsx from "xlsx";
import {exportDocx} from "@/util/doc";
export default {
  name: 'MainIndex',
  props: {
    msg: String
  },
  data() {
    return {
      disabled: true,
      tableData: [],
      dataList: []
    };
  },
  methods: {
    // 点击模板按钮触发a下载文件
    downloadTemplate() {
      this.$refs.downloadTemplate.dispatchEvent(new MouseEvent('click'))
    },

    handleExport() {
      if (this.tableData.length > 5000) {
        alert('数据量过大，最大仅支持5000，请重新选择文件')
        return
      }
      this.tableData.forEach(item => {
        let data = {
          name: item.核对人 ? item.核对人 : '            ',
          date: item.核对时间 ? item.核对时间 : '           ',
          remark: item.核对信息 ? item.核对信息 : '           ',
          address: item.核对地址 ? item.核对地址 : '            ',
          otherName: item.回执人 ? item.回执人 : '                ',
          otherRemark: item.回执信息 ? item.回执信息 : '             '
        }
        this.dataList.push(data);
      })
      exportDocx('template.docx', this.dataList, '村级债权核对函')
    },

    handleFileUpload(event) {
      this.tableData = []
      const file = event.raw;

      const reader = new FileReader();
      // 处理文件内容
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = xlsx.read(data, {type: 'array'});

        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = xlsx.utils.sheet_to_json(worksheet, {header: 1});

        // 提取文件内容
        let headers = jsonData[0];
        jsonData.slice(1).forEach(row => {
          const rowData = row.reduce((accumulator, item, index) => {
            let column = headers[index]
            accumulator[column] = item;
            return accumulator
          }, {})
          if (!rowData || !rowData.核对人) {
            return
          }
          this.tableData.push(rowData)
        })
      };
      // 读取文件内容
      reader.readAsArrayBuffer(file);
      this.disabled = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
:deep(.el-upload-list__item-name) {
  padding: 5px 0;
  font-size: 20px;
}

.hello {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  margin: 8px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.box {
  width: 500px;
  height: 500px;
  position: relative;
}

.chl_box {
  width: 450px;
  height: 450px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

</style>
